/**
 * 分页工具栏
 */
Vue.component('page-bar', {

  props: { 
    // 每页记录数可选值 
    pageSizes: {
      type: Array,
      default: function() {
        return [10, 20, 50, 100];
      }
    },
    
    // 从服务器取得的分页数据
    pageData: {
      type: Object,
      default: function() {
        return {
          page: 1, // 当前页码
          rows: 10, // 每页记录数
          total: 0, // 总记录数
        }
      }
    },
    
    // 如果只有一页或没有数据则隐藏分页控件
    hideIfOnlyOnePage: {
      type: Boolean,
      default: function() {
        return true;
      }
    }
  },
  
  data () {
    return {
      page: this.pageData.page,
      pageSize: this.pageData.rows,
    };
  },
  
  computed: {
    
    hide: function() {
      return this.hideIfOnlyOnePage && (this.pageData.total <= this.pageData.rows);
    },
    
  },
  
  template: heredoc(function() {
    /*
      <el-row class="pagingbar" style="margin:10px 0">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageData.total" 
          style="float:right"
          v-if="!hide">
        </el-pagination>
      </el-row>
     */
  }),
  
  methods: {
    
    handleSizeChange(val) {
      this.pageSize = val;
      this.reload();
    },
    
    handleCurrentChange(val) {
      this.page = val;
      this.reload();
    },
    
    reload() {
      this.$emit('onreload', this.page, this.pageSize);
    },
    
  },
  
  created() {
  },
  
});